<template>
  <div>
    <el-button
      size="small"
      style="margin-bottom: 4px; float: right"
      type="primary"
      @click="handleAdd"
      >新增分类</el-button
    >
    <el-table
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :data="tableData"
      row-key="categoryid"
      border
      size="small"
    >
      <el-table-column prop="categoryid" label="ID" width="120" />
      <el-table-column prop="categoryname" label="分类名称" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" type="warning" @click="handleUpd(scope.row)"
            >修改</el-button
          >
          <el-button size="small" type="danger" @click="handleDel(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="updFormVisible" :title="formTitle" width="500" center>
      <el-form size="small" :model="formData" label-width="60px">
        <el-form-item label="父分类">
          <el-select
            v-model="formData.parentid"
            placeholder="请选择"
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.categoryid"
              :label="item.categoryname"
              :value="item.categoryid"
              @click="changeCataegory(item)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input
            v-model="formData.categoryname"
            placeholder="请输入分类名称"
            clearable
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveForm">更新</el-button>
          <el-button @click="updFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import {
  getAllCategory,
  delCategory,
  getLevelList,
  updCategory,
  addCategory,
} from "@/api/category";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { CODE } from "@/utils/StatusCode";

const tableData = ref([]);
const categoryOptions = ref<category[]>([]);

onMounted(() => {
  getAllCategoryList();
  getCategoryLevelList();
});
// 获取分类列表
async function getAllCategoryList() {
  const res = await getAllCategory({});
  if (res.code == CODE.OK) {
    tableData.value = res.data;
  }
}
// 获取分类列表
async function getCategoryLevelList() {
  const res = await getLevelList({ level: 2 });
  if (res.code == CODE.OK) {
    categoryOptions.value = res.data;
  }
}

// 修改
interface category {
  categoryid: number;
  parentid: number;
  categoryname: string;
  level: number;
}
const updFormVisible = ref(false);
let formTitle = "";
const formData = reactive<category>({
  categoryid: 0,
  parentid: 0,
  categoryname: "",
  level: 0,
});
function changeCataegory(item: category) {
  formData.level = item.level + 1;
}
function handleUpd(row: category) {
  Object.keys(formData).forEach((fieId) => {
    formData[fieId] = row[fieId];
  });
  formTitle = "修改分类";
  updFormVisible.value = true;
}
function handleAdd() {
  Object.keys(formData).forEach((fieId) => {
    formData[fieId] = "";
  });
  formTitle = "新增分类";
  updFormVisible.value = true;
}
// 保存
async function saveForm() {
  let res;
  if (formData.categoryid) {
    res = await updCategory(formData);
  } else {
    res = await addCategory(formData);
  }
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
    });
    updFormVisible.value = false;
    getAllCategoryList();
    getCategoryLevelList();
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
// 删除
function handleDel(row: category) {
  if (!row.categoryid) return;
  ElMessageBox.confirm("是否删除此分类", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await delCategory({
        categoryid: row.categoryid,
      });
      if (res.code == CODE.OK) {
        ElMessage({
          message: res.message,
          type: "success",
        });
        getAllCategoryList();
        getCategoryLevelList();
      } else {
        ElMessage({
          message: res.message,
          type: "error",
        });
      }
    })
    .catch(() => {});
}
</script>

<style lang="less" scoped></style>
